import { CreateElement } from "vue";
import { Component } from 'vue-property-decorator';
import { throttle } from "ibiz-core";
import { AppGridViewBase, VueLifeCycleProcessing } from "ibiz-vue";

/**
 * ${view.getCaption()}
 *
 * @export
 * @class ${srfclassname('${view.name}')}
 * @extends {Vue}
 */
@Component({})
@VueLifeCycleProcessing()
export class ${srfclassname('${view.name}')} extends AppGridViewBase {

    /**
     * 是否展示标题
     *
     * @type {boolean}
     * @memberof ${srfclassname('${view.name}')}
     */
    public showCaption: boolean = ${view.isShowCaptionBar()?c};

    /**
     * 是否展示工具栏
     *
     * @type {boolean}
     * @memberof ${srfclassname('${view.name}')}
     */
    public showToolbar: boolean = ${view.hasPSControl('toolbar')?c};

    /**
     * 支持快速分组搜索
     *
     * @type {boolean}
     * @memberof ${srfclassname('${view.name}')}
     */
    public quickGroupSearch: boolean = ${view.isEnableQuickGroup()?c};

    /**
     * 支持快速搜索
     *
     * @type {boolean}
     * @memberof ${srfclassname('${view.name}')}
     */
    public quickSearch: boolean = ${view.isEnableQuickSearch()?c};

    /**
     * 默认展开搜索表单
     *
     * @type {boolean}
     * @memberof ${srfclassname('${view.name}')}
     */
    public isExpandSearchForm: boolean = ${view.isExpandSearchForm()?c};

    /**
     * 表格视图渲染
     * 
     * @memberof ${srfclassname('${view.name}')}
     */
    render(h: CreateElement) {
        if (!this.viewIsLoaded) {
            return null;
        }
        let viewClass = {
            'view-container': true,
            'view-default': true,
            '${view.getViewType()?lower_case}': true,
            '${srffilepath2(view.getCodeName())}': true,
            <#if view.getPSSysCss?? && view.getPSSysCss()??>'${view.getPSSysCss().getCssName()}': true</#if>
        };

        return (
            <div class={viewClass}>
                <app-studioaction
                    viewInstance={this.viewInstance}
                    context={this.context}
                    viewparams={this.viewparams}
                    viewName={'${view.getCodeName()?lower_case}'}
                    viewTitle={this.model?.srfCaption} />
                {this.renderViewContent()}
            </div>
        );
    }

    /**
     * 渲染视图工具栏
     *
     * @memberof ${srfclassname('${view.name}')}
     */
     public renderToolBar() {
        if (!(this.toolbarModels && this.toolbarModels.length > 0)) {
            return null;
        }
        return (
            <view-toolbar
                slot='toolbar'
                mode={this.viewInstance?.viewStyle || 'DEFAULT'}
                counterServiceArray={this.counterServiceArray}
                isViewLoading={this.viewLoadingService?.isLoading}
                toolbarModels={this.toolbarModels}
                on-item-click={(data: any, $event: any) => {
                    throttle(this.handleItemClick, [data, $event], this);
                }}
            ></view-toolbar>
        );
    }

    /**
     * 绘制头部内容
     * 
     * @memberof ${srfclassname('${view.name}')}
     */
    public renderViewHeader() {
        return [
            <div class="caption-container">
                {this.showCaption ? <span class='caption-info'>{this.renderCaptionInfo()}</span> : null}
                {this.quickGroupSearch ? this.renderQuickGroup() : null}
            </div>,
            <div class="bar-container">
                {this.quickSearch ? this.renderViewQuickSearch() : null}
                {this.showToolbar ? this.renderToolBar() : null}
            </div>
        ]
    }

    /**
    * 绘制内容
    * 
    * @memberof ${srfclassname('${view.name}')}
    */
    public renderViewContent() {
        const noHeader = !this.showCaption && !this.showToolbar && !this.quickGroupSearch && !this.quickSearch
        let cardClass = {
            'view-card': true,
            'mdview-card': true,
            'view-no-caption': !this.showCaption,
            'view-no-toolbar': !this.showToolbar,
            'view-no-header': noHeader
        };
        return (
            <card class={cardClass} disHover={true} bordered={false}>
                {!noHeader ? <div slot='title' class='header-container' key='view-header'>
                    {this.renderViewHeader()}
                </div> : null}
                {this.renderTopMessage()}
                <div class='content-container'>
                    {this.quickSearch && !this.isExpandSearchForm ? null : this.renderSearchForm()}
                    {this.renderBodyMessage()}
                    {this.renderMainContent()}
                </div>
                {this.renderBottomMessage()}
            </card>
        );
    }

    /**
     * 渲染快速搜索
     *
     * @memberof ${srfclassname('${view.name}')}
     */
    public renderViewQuickSearch() {
        if (this.quickSearch && !this.viewInstance.expandSearchForm) {
            const searchFormVNode = this.renderSearchForm();
            const searchBarVNode = this.renderSearchBar();
            const content = this.renderDefaultQuickSearchFilter(searchFormVNode ? searchFormVNode : searchBarVNode ? searchBarVNode : null);
            return content;
        } else {
            return this.renderQuickSearch();
        }
    }

}